<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试websocket聊天demo</title>
    <script src="/static/lib/jquery-3.1.0.min.js"></script>
    <script src="/static/lib/pako.min.js"></script>
    <script src="/static/lib/base64.min.js"></script>
    <script src="/static/lib/byte-buffer.min.js"></script>
    <script src="/static/lib/websocket.js"></script>
    <script>
        $(function(){
            var coConfig = null, websocket = null, appidstr=10000;
            var vtoken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2NDEzMDM4NzAsImp0aSI6IjM4NzY0MDQxNzg4MzE5MDE0OXw0OTJmNjcwY2ZmN2IxN2E3ODA5OTI1ODNiODc1YWMyZSIsImlzcyI6Il8ifQ.dqOq6XEgtM1m_WMen0UThRH9t8MBSqefqhqIeuxBuxI"
            var vagent = "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1"
            var vuserid= "387578149447331405"
            $("#token").val(vtoken);
            $("#agent").val(vagent);
            $("#userid").val(vuserid);
            $("#open").click(function(){
                var tokenstr = $("#token").val();
                var agentstr = $("#agent").val();
                var params = {token:tokenstr, agent:agentstr, appid:appidstr};
                $.ajax({
                    type: "post",
                    url: "/api/im/register",
                    dataType : "json",
                    contentType : "application/json",      //网上很多介绍加上此参数的，后来我发现不加入这个参数才会请求成功。
                    data: JSON.stringify(params),
                    success: function (data) {
                        coConfig = data.datas;
                        websocket = new SBimsc.websocks(coConfig.wsUri, coConfig.user, 0, coConfig.vkey);
                        $("#output").html(JSON.stringify(coConfig))
                    }
                });
                return false
            });
            $("#join").click(function(){
                if(websocket) {
                    websocket.doenter(1, 1);
                }
                return false
            });
            $("#leave").click(function(){
                if(websocket) {
                    websocket.doenter(1, 0);
                }
                return false
            });
            $("#close").click(function(){
                (SBimsc.socks) && SBimsc.socks.close();
                return false
            });
            $("#sendC2C").click(function(){
                if (websocket) {
                    var touserid = $("#userid").val();
                    var mstr   = $("#msg").val()
                    var touser = {userid:touserid, nick:"demo"+touserid, gender:1, avatar:"/1.jpg"};
                    var message = [{type:0, "text":mstr, "stime":1, "uuid":websocket.uuid()}]
                    websocket.setTouser(touser)
                    websocket.douser(message, 0, 0)
                }
                return false
            });
            $("#sendCHAN").click(function(){
                if (websocket) {
                    var chnid  = 1
                    var mstr   = $("#msg").val()
                    var touser = {userid:chnid, nick:"群聊"+chnid, gender:1, avatar:"/1.jpg"};
                    var message = [{type:0, "text":mstr, "stime":1, "uuid":websocket.uuid()}]
                    websocket.setTouser(touser)
                    websocket.dochan(chnid, message, 1, 0)
                }
                return false
            });
            $("#sendALL").click(function(){
                if (websocket) {
                    var mstr   = $("#msg").val()
                    var touser = {userid:0, nick:"世界广场", gender:1, avatar:"/1.jpg"};
                    var message = [{type:0, "text":mstr, "stime":1, "uuid":websocket.uuid()}]
                    websocket.setTouser(touser)
                    websocket.dochan(0, message, 2, 0)
                }
                return false
            });
        });
    </script>
    <style>
        .left {
            width: 50%;
        }
        .right{
            width: 50%;
        }
    </style>
</head>
<body>
<view>
    <view class="left">
        <p>点击"登录打开连接"模拟账号登录，同时完成ws连接并完成用户登录操作.<br /><p>
        <form>
            <view>对接token</view>
            <view><textarea id="token" style="width: 760px;height: 64px"></textarea></view>
            <view>对接agent</view>
            <view><textarea id="agent" style="width: 760px;height: 64px"></textarea></view>
        </form>
        <form>
            <button id="open">连接登录</button>
            <button id="join">加入房间(默认1)</button>
            <button id="leave">离开房间(默认1)</button>
            <button id="close">关闭连接</button>
            <p>
                设置接收用户<input id="userid" type="text" value="3">
                <input id="msg" type="text" value="Hello world!">
                <button id="sendC2C">发送C2C</button>
                <button id="sendCHAN">发送频道(默认-1)</button>
                <button id="sendALL">发送ALL(全局广播)</button>
        </form>
    </view>
    <view class="right">
        处理结果反馈:
        <div id="output" style="max-height: 70vh;overflow-y: scroll;"></div>
    </view>
</view>
</body>
</html>